<template>
  <div>
    <div class="center">
      <div class="xuxian">
        <div>
          <span style="font-size: 35px"><strong>新闻资讯</strong></span>
          <span style="font-size: 18pt; color: gray"
            ><strong></strong>NEWS</span
          >
          <img src="@/assets/xuxian.png" alt="" />
        </div>
      </div>
      <div class="chanpin">
        <p>新闻资讯</p>
        <p>常见问题</p>
        <div class="ZiXun">
          <div>
            <span><img src="/src/ShouYe/lvdian.jpg" alt="" /> </span>
            <span>拆炉机行走传动装置总成配件具有哪些特点?</span>
            <span>【查看详情】</span>
          </div>
          <div>
            <span><img src="/src/ShouYe/lvdian.jpg" alt="" /> </span>
            <span>在操作拆炉机高频破碎锤时需注意哪些事项?</span>
            <span>【查看详情】</span>
          </div>
          <div>
            <span><img src="/src/ShouYe/lvdian.jpg" alt="" /> </span>
            <span>拆炉机麻花钻钻头的结构会对切削加工造成哪些影响?</span>
            <span style="margin-left: 290px">【查看详情】</span>
          </div>
          <div>
            <span><img src="/src/ShouYe/lvdian.jpg" alt="" /> </span>
            <span>在冬季使用拆炉机钻杆时需注意什么?</span>
            <span style="margin-left: 396px">【查看详情】</span>
          </div>
          <div>
            <span><img src="/src/ShouYe/lvdian.jpg" alt="" /> </span>
            <span>拆炉机结构介绍</span>
            <span style="margin-left: 540px">【查看详情】</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.center {
  width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}
.xuxian {
  margin-top: 50px;
  display: flex;
}
.xuxian > div {
  margin: 0 auto;
  white-space: nowrap//强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。;
}
.xuxian > div > img {
  display: inline-block;
}
.xuxian > div > span {
  margin: 10px;
}
.chanpin {
  margin-top: 30px;
}
.chanpin > p {
  margin: 5px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-color: #e5e5e5;
  font-size: 20px;
  background-color: #eeeeee;
  text-align: center;
  position: relative;
  left: 113px;
  cursor: pointer;
  dis &:hover {
    background-color: #1e61ba;
    color: white;
  }
}
.ZiXun {
  float: left;
  position: relative;
  top: -120px;
  left: 350px;
  font-size: 15px;
}

.ZiXun div {
  height: 50px;
  margin: 15px;
  line-height: 50px;
  border-bottom: 1px dashed #dbdbdb;
}
.ZiXun span:first-child {
  margin: 50px;
}
.ZiXun span:last-child {
  margin-left: 350px;
  cursor: pointer;
}
.ZiXun span:nth-child(2) {
  cursor: pointer;
}
.ZiXun img {
  width: 10px;
  height: 10px;
  display: inline-block;
}
</style>
